/**
 * Created by Administrator on 2018/8/22.
 */
$(function () {

    // 兼容
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // $(".yes-weixin").css("display", "block");
    } else {
        // $(".not-weixin").css("display", "block");
        $(".feature").css("height","88%");
        $(".inner-wrap .map-button").css("bottom","3rem");
        $(".onTheBotton").css("margin","-.18rem auto 0");
        $(".share-poster-box").css("height","8.12rem");
        $(".poster").css("height","8.12rem");
        $(".inner-upglide > .up-arrow").css("top","0rem");
    }


    // 首页点击按钮上滑
    $(".gg-title img").on("click", function () {
        swiperggInfo.allowTouchMove = true;
        swiperggInfo.update();
        $(".home-upglide").toggleClass("home-downglide");
    })
    $(".inner-upglide > .up-arrow").on("click", function () {
        innerRoll.allowTouchMove = true;
        innerRoll.update();
        innerRoll.scrollbar.updateSize();
        $(".inner-upglide").toggleClass("inner-downglide");

        if ($(".inner-upglide").hasClass("inner-downglide")) {
            clearTimeout(hideAlbumTime);
            $(".innerBg").css("display","block");
        } else {
            clearTimeout(hideAlbumTime);
            hideAlbum5s();
            $(".innerBg").css("display","none");
        }

        if ($(".photo-wrap i").hasClass("active")) {
            $(".inner-upglide").css("bottom", "0rem");
        } else {
            $(".inner-upglide").css("bottom", "-1.3rem");

        }
        setTimeout(function(){
            $(".inner-downglide").css("bottom", "0rem");
        },16)
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            // $(".yes-weixin").css("display", "block");
        } else {
            if ($(".inner-upglide").hasClass("inner-downglide")) {
                $(".inner-upglide > .up-arrow").css("top",".5rem");
            } else {
                $(".inner-upglide > .up-arrow").css("top","0rem");
            }
        }
    })

    // 切换顶部两张图片的显示与隐藏
    function isShow(dom, class1, class2) {
        $("." + dom).on("click", function () {
            if ($("." + class1).css("visibility") == "visible") {
                $("." + class1).css("visibility", "hidden");
                $("." + class2).css("visibility", "visible");
            } else {
                $("." + class1).css("visibility", "visible");
                $("." + class2).css("visibility", "hidden");
            }
        })
    }

    isShow("header-g-safe", "g-safe-img1", "g-safe-img2");
    isShow("like-wrap", "like-img1", "like-img2");
    isShow("comment-wrap", "comment-img1", "comment-img2");
    isShow("share-wrap", "share-img1", "share-img2");
    isShow("photo-wrap", "photo-img1", "photo-img2");
    // isShow("header-audio","audio-img1","audio-img2");
    isShow("header-vr", "header-vr-img1", "header-vr-img2");

    // 音乐图标旋转
    $(".header-audio").on("click", function () {
        if ($(".audio-img1").hasClass("audio-img1-rotate")) {
            $(".audio-img1").removeClass("audio-img1-rotate")
        } else {
            $(".audio-img1").addClass("audio-img1-rotate")
        }
    });

    // 点赞

    //判断是否已经点赞，如点赞了，添加已点击样式
    if (getCookie("deviceCode")) {
        $(".like-wrap i").addClass("active");
    }


    var isCancelLike = true;
    $(".like-wrap").on("click", function () {
        if (getCookie("deviceCode")) {
            if (isCancelLike) {//还没取消点赞
                isCancelLike = false;
                $(this).find("p").html(parseInt($(this).find("p").html()) - 1);
                $(".like-wrap i").removeClass("active");
                $(".piaoxin").removeClass("piaoxin1");
            } else {//已取消点赞
                isCancelLike = true;
                $(this).find("p").html(parseInt($(this).find("p").html()) + 1);
                $(".like-wrap i").addClass("active");
                $(".piaoxin").addClass("piaoxin1");
                setTimeout(function () {
                    $(".piaoxin").removeClass("piaoxin1");
                }, 1000);
            }
        } else {
            like();
            $(this).children("i").addClass("active");
            setCookie("deviceCode", "true");
        }
    });

    // 相册折叠与展开
    $(".photo-wrap").on("click", function () {

        //5s 隐藏相册
        clearTimeout(hideAlbumTime)
        hideAlbum5s();

        if ($(this).children("i").hasClass("active")) {
            $(this).children("i").removeClass("active");
            $(".album-wrap").css("bottom", "-1.25rem");
            $(".inner-upglide").css("bottom", "-1.3rem");

        } else {
            $(this).children("i").addClass("active");
            $(".album-wrap").css("bottom", ".15rem");
            $(".inner-upglide").css("bottom", "0rem");
        }
    })

    // 语音按钮
    $(".voice").on("click", function () {
        $(".voice").toggleClass("active");
    })

    // 关闭图文弹出层
    $(".imgText-mask > .up-arrow").on("click", function () {
        console.log(123);
        $(".imgText-mask").addClass("imgText-mask-close")
    })

    // 分享弹出层
    $(".share-wrap").on("click", function () {
        $(".share-mask").fadeIn(300);
    })
    $(".share-close").on("click", function () {
        $(".share-mask").fadeOut(300);
    })
    $(".shareToWeixin-btn").on("click", function () {
        $(".ground-floor").css("display", "none");
        $(".shareTo-weixin").css("display", "block");
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            $(".yes-weixin").css("display", "block");
        } else {
            $(".not-weixin").css("display", "block");
            // $(".feature").css("height","88%");
            // $(".inner-wrap .map-button").css("bottom","4.2rem");
            // $(".onTheBotton").css("margin",".18rem auto 0");
            // $(".share-poster-box").css("height","8.12rem");
            // $(".poster").css("height","8.12rem");
        }
    })
    $(".shareTo-weixin").on("click", function (e) {
        if (
            !$(e.target).closest(".yes-weixin").length &&
            !$(e.target).closest(".not-weixin").length
        ) {
            $(".ground-floor").css("display", "block");
            $(".shareTo-weixin").css("display", "none");
        }
    })
    $(".shareToWeibo-btn").on("click", function () {
        $(".ground-floor").css("display", "none");
        $(".shareTo-weibo").css("display", "block");
    })
    $(".cancel").on("click", function () {
        $(".ground-floor").css("display", "block");
        $(".shareTo-weibo").css("display", "none");
    })

    // 三维
    $(".dim-up-arrow").on("click", function () {
        $(".dimensional-upglide").toggleClass("dimensional-downglide")
    })
    $(".dimensional-back-img").click(function () {
        $(".dimensional-mask").hide();
        if(model && model.model3dView){
            model.model3dView.clear()
        }
    });

    //map start-----------------------------------------------------------------------------------------------------------------------------------------

    let isSelect = false;

    //地图筛选按钮点击弹出筛选菜单

    $("#map-select").on("click", function () {
        $("#select-btn-box").addClass("active");
        $("#map-button").css("display", "none");

        if (isSmallMap) {

            //$(".select-btn-item").removeClass("active");
            //点击时，都隐藏markerk
            //$(".architecture-marker").removeClass("show");

        }else {
            //$(".select-btn-item").removeClass("active");
            //$(".gongdian-btn").addClass("active")
        }
    });

    //地图-筛选关闭
    $(".select-close").on("click", function () {
        //console.log(123);
        $("#select-btn-box").removeClass("active");
        $("#map-button").css("display", "block");

        if (isSmallMap) {
            //$("#baDaDian").fadeIn(300);
            // $("#bigImgMarker").fadeOut(300);
        }
    });

    //全景下点击地图按钮进入地图
    $(".map-button").on("click", function () {
        isSelect =false;
        $(".map-mask").fadeIn(300);
        $(".map-box").removeClass("gd-taiHeDian gd-qianQingGong gd-wenHuaDian gd-wuYingDian gd-huangJiDian gd-ciNingGong gd-yanXiGong gd-yangXinDian");
        $("#baDaDian").css("opacity",0).addClass("active");
    });

    //地图-关闭
    $("#map-close").on("click", function () {
        isSelect = false;
        $(".map-mask").fadeOut(300);
        //$("#bigImgMarker").fadeOut(300);

        //恢复初始状态
        $(".map-box").removeClass("active");
        $("#bigImgMarker").hide().addClass("hideName");
        $("#baDaDian").show();
        $(".select-btn-item").removeClass("active");
        $(".architecture-marker").removeClass("show");
        $(".architecture-marker[group='宫殿']").toggleClass("show");
        $("#map-big").removeClass("active");
        $(".map-box").removeClass("gd-taiHeDian gd-qianQingGong gd-wenHuaDian gd-wuYingDian gd-huangJiDian gd-ciNingGong gd-yanXiGong gd-yangXinDian");

    });



    //地图marker 类型筛选
    $(".select-btn-item").on("click", function () {

        isSelect =true;

        //只要筛选，八大殿就不显示
        $("#baDaDian").hide();

        //如果在小地图小，隐藏八大宫殿
        if (isSmallMap) {
            //$("#baDaDian").fadeOut(300);
            //$("#bigImgMarker").fadeIn(300).addClass("hideName");
            $("#bigImgMarker").fadeIn(300).addClass("hideName").addClass("active");
        }else {
            $("#bigImgMarker").fadeIn(300).removeClass("hideName").addClass("active");
        }

        $(this).addClass("active").siblings().removeClass("active");

        $(".architecture-marker").removeClass("show");

        if($(this).hasClass("gongdian-btn")){
            $(".architecture-marker[group='宫殿']").toggleClass("show");
        }
        if($(this).hasClass("repast-btn")){
            $(".architecture-marker[group='餐饮']").toggleClass("show");
        }
        if($(this).hasClass("shop-btn")){
            $(".architecture-marker[group='商店']").toggleClass("show");
        }
        if($(this).hasClass("toilet-btn")){
            $(".architecture-marker[group='卫生间']").toggleClass("show");
        }
        if($(this).hasClass("rests-btn")){
            $(".architecture-marker[group='其他']").toggleClass("show");
        }
    });


    var screenWidth = $(window).width(); //获取屏幕的宽度
    var screenHeight = $(window).height(); //获取屏幕的高度

    //放大/缩小地图
    $("#map-big").on("click", function () { //大
        let scrollHeight = $(".map-wrap")[0].scrollHeight;
        let scrollWidth = $(".map-wrap")[0].scrollWidth;

        $(this).toggleClass("active");

        if ($(this).hasClass("active")) {//
            isSmallMap = false;

            $("#bigImgMarker").show().removeClass("hideName").removeClass("active");
            setTimeout(function(){
                $("#bigImgMarker").addClass("active");
            },5)
            $(".map-box").addClass("active");
            $("#baDaDian").css("display", "none").removeClass("active");


            //钟表显示
            $(".map-zbz").hide();

            $(".map-wrap").scrollTop($(".map-wrap")[0].scrollHeight / 2 - screenHeight / 2);
            $(".map-wrap").scrollLeft($(".map-wrap")[0].scrollWidth / 2 - screenWidth / 2);

        } else { //小
            isSmallMap = true;

            if(isSelect){ //筛选
                $("#baDaDian").hide();
                $("#bigImgMarker").show().addClass("hideName").removeClass("active");
                setTimeout(function(){
                    $("#bigImgMarker").addClass("active");
                },5)
            }else { //没筛选
                $("#bigImgMarker").hide().addClass("hideName").removeClass("active");
                $("#baDaDian").show().addClass("active");
            }
            $(".map-box").removeClass("active");
            $(".map-box").addClass("active1");
            setTimeout(function(){
                $(".map-box").removeClass("active1");
            },516);
            $(".map-box").removeClass("gd-taiHeDian gd-qianQingGong gd-wenHuaDian gd-wuYingDian gd-huangJiDian gd-ciNingGong gd-yanXiGong gd-yangXinDian");

            // $("#bigImgMarker").show().addClass("hideName");
            // $(".map-box").removeClass("active");
            // $("#map").removeClass("active");
            //$("#baDaDian").css("display", "block");
            //$("#bigImgMarker").css("display", "none");

            //钟表显示
            $(".map-zbz").hide();
        }
    });


    //八大殿点 放大定位
    $(".baDaDian-item").click(function () {
        //$("#map-big").trigger("click");
        $("#bigImgMarker").show().removeClass("hideName").addClass("active");
        $("#baDaDian").hide();

        $("#map-big,.map-box").addClass("active");
        $(".architecture-marker").removeClass("show");
        $(".architecture-marker[group='宫殿']").addClass("show");

        console.log($(".map-wrap")[0].scrollHeight);
        console.log($(".map-wrap")[0].scrollWidth);

        let scrollHeight = $(".map-wrap")[0].scrollHeight;
        let scrollWidth = $(".map-wrap")[0].scrollWidth;

        let curLeft = $(this).attr("left");
        let curTop = $(this).attr("top");

        $(".map-box").css({
            "background-position-x": curLeft + "%",
            "background-position-y": curTop + "%",
        });



        console.log(curLeft);
        console.log(curTop);


        let curMoveBbj = $(".map-wrap");
        let showTime = 800;

        if ($(this).attr("id") == "taiHeDian") {//太和殿 1 OK
            // $(".map-wrap").scrollTop(scrollHeight / 2 - screenHeight / 2);
            // $(".map-wrap").scrollLeft(scrollWidth / 2 - screenWidth / 2);
            //
            // curMoveBbj.animate({
            //     scrollLeft: scrollWidth * 0.3,
            //     scrollTop: scrollHeight * 0.41,
            // }, showTime);
            $(".map-box").addClass("gd-taiHeDian")
            $(".map-wrap").scrollTop($(".map-wrap")[0].scrollHeight / 2 - screenHeight / 2 + 100);
            $(".map-wrap").scrollLeft($(".map-wrap")[0].scrollWidth / 2 - screenWidth / 2);
        }
        if ($(this).attr("id") == "qianQingGong") {//乾清宫 2 OK
            // $(".map-wrap").scrollTop(scrollHeight*0.1);
            // $(".map-wrap").scrollLeft(scrollWidth / 2 - screenWidth / 2);
            //
            // curMoveBbj.animate({
            //     scrollLeft: scrollWidth * 0.3,
            //     scrollTop: scrollHeight * 0.01,
            // }, showTime);
            $(".map-box").addClass("gd-qianQingGong")
            $(".map-wrap").scrollTop(0+50);
            $(".map-wrap").scrollLeft($(".map-wrap")[0].scrollWidth / 2 - screenWidth / 2);
        }
        if ($(this).attr("id") == "wenHuaDian") {//文华殿 3  OK

            // $(".map-wrap").scrollTop(scrollHeight*0.45);
            // $(".map-wrap").scrollLeft(scrollWidth*0.4);
            //
            // curMoveBbj.animate({
            //     scrollLeft: scrollWidth * 1,
            //     scrollTop: scrollHeight *0.42
            // }, showTime);
            $(".map-box").addClass("gd-wenHuaDian")
            $(".map-wrap").scrollTop($(".map-wrap")[0].scrollHeight / 2 - screenHeight / 2 + 350);
            $(".map-wrap").scrollLeft(scrollWidth);
        }
        if ($(this).attr("id") == "wuYingDian") {//武英殿 4  OK
            // $(".map-wrap").scrollTop(scrollHeight*0.45);
            // $(".map-wrap").scrollLeft(scrollWidth*0.2);
            // curMoveBbj.animate({
            //     scrollLeft: scrollWidth *0,
            //     scrollTop: scrollHeight *0.42,
            // }, showTime);
            $(".map-box").addClass("gd-wuYingDian")
            $(".map-wrap").scrollTop($(".map-wrap")[0].scrollHeight / 2 - screenHeight / 2 + 350);
            $(".map-wrap").scrollLeft(0);
        }
        if ($(this).attr("id") == "huangJiDian") {//皇极殿 5 OK
            // $(".map-wrap").scrollTop(scrollHeight*0.15);
            // $(".map-wrap").scrollLeft(scrollWidth*0.30);
            // curMoveBbj.animate({
            //     scrollLeft: scrollWidth * 1,
            //     scrollTop: scrollHeight * 0,
            // }, showTime);
            $(".map-box").addClass("gd-huangJiDian")
            $(".map-wrap").scrollTop($(".map-wrap")[0].scrollHeight / 2 - screenHeight / 2 - 350);
            $(".map-wrap").scrollLeft(scrollWidth);
        }
        if ($(this).attr("id") == "ciNingGong") {//慈宁宫 6 OK
            // $(".map-wrap").scrollTop(scrollHeight*0.15);
            // $(".map-wrap").scrollLeft(scrollWidth*0.20);
            // curMoveBbj.animate({
            //     scrollLeft: scrollWidth * 0.05,
            //     scrollTop: scrollHeight * 0.05,
            // }, showTime);
            $(".map-box").addClass("gd-ciNingGong")
            $(".map-wrap").scrollTop($(".map-wrap")[0].scrollHeight / 2 - screenHeight / 2 - 200);
            $(".map-wrap").scrollLeft(0);
        }
        if ($(this).attr("id") == "yanXiGong") {//延禧宫 7
            // $(".map-wrap").scrollTop(scrollHeight*0.15);
            // $(".map-wrap").scrollLeft(scrollWidth*0.20);
            // curMoveBbj.animate({
            //     scrollLeft: scrollWidth * 0.5,
            //     scrollTop: scrollHeight * 0.05,
            // }, showTime);
            $(".map-box").addClass("gd-yanXiGong")
            $(".map-wrap").scrollTop($(".map-wrap")[0].scrollHeight / 2 - screenHeight / 2 -330);
            $(".map-wrap").scrollLeft($(".map-wrap")[0].scrollWidth / 2 - screenWidth / 2 + 150);
        }
        if ($(this).attr("id") == "yangXinDian") {//养心殿 8 OK
            // $(".map-wrap").scrollTop(scrollHeight*0.15);
            // $(".map-wrap").scrollLeft(scrollWidth*0.20);
            // curMoveBbj.animate({
            //     scrollLeft: scrollWidth * 0.15,
            //     scrollTop: scrollHeight * 0,
            // }, showTime);
            $(".map-box").addClass("gd-yangXinDian")
            $(".map-wrap").scrollTop($(".map-wrap")[0].scrollHeight / 2 - screenHeight / 2 -280);
            $(".map-wrap").scrollLeft($(".map-wrap")[0].scrollWidth / 2 - screenWidth / 2 - 100);
        }

    });


    //地图marker点击
    $(document).on("click touchend", ".architecture-icon", function () {
        if(isSmallMap){//小地图点击


            // $(".map-wrap").animate({
            //     scrollTop: $("#bigImgMarker").height() * 0.45,
            //     scrollLeft: $("#bigImgMarker").width() * 0.3,
            // }, 500);


            let top = $(this).parents(".architecture-marker").attr("top");
            let left = $(this).parents(".architecture-marker").attr("left");
            console.log(left);
            console.log(top);

            let toLeft = screenWidth*2.5*left/100 - screenWidth/2;
            let toTop = screenHeight*2.5*top/100 - screenHeight/2;

            console.log(toLeft);
            console.log(toTop);


            $(this).siblings(".imgMarker-name").toggleClass("active");

            $(".map-box").addClass("active");
            $("#bigImgMarker").show().removeClass("hideName");
            $("#map-big").addClass("active");
            isSmallMap = false;

            $(".map-wrap").animate({
                scrollTop: toTop,
                scrollLeft: toLeft
            }, 300);



        }else {//放大后的marker点击
            //当前显示最上层
            $(this).parents(".architecture-marker").addClass("markerIndex").siblings().removeClass("markerIndex");

            //当前显示name 其他不显示
            $(this).siblings(".imgMarker-name").addClass("active");
            $(this).parents(".architecture-marker").siblings(".architecture-marker").children(".noRecommend").removeClass("active");

            var top = $(this).parents(".architecture-marker").position().top;
            var left = $(this).parents(".architecture-marker").position().left;

            //点击marker 地图位移，如果觉得不够精确，通过屏幕的宽高来判断
            $(".map-wrap").animate({
                scrollTop: top - 250,
                scrollLeft: left - 200,
            }, 500);
        }

    });


    //map start-----------------------------------------------------------------------------------------------------------------------------------------

});
